<template>
    <div class="create-category">
        <el-button type="text" icon="Plus" @click="showDialog = true"> {{ buttonText || "创建分类"}} </el-button>
        <el-dialog title="创建分类" v-model="showDialog">
            <el-form  ref="categoryRef" :model="categoryForm" :rules="categoryRules">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="categoryForm.name" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item label="分类英文" prop="slug">
                    <el-input v-model="categoryForm.slug" placeholder="请输入分类英文"></el-input>
                </el-form-item>
                <el-form-item label="排序级别" prop="index">
                    <el-input v-model.number="categoryForm.index" placeholder="请输入排序级别" type="number"></el-input>
                </el-form-item>
                <el-form-item label="父级" prop="parent_category_id">
                    <el-select v-model="categoryForm.parent_category_id" filterable placeholder="是否选择父级">
                        <el-option v-for="cat in parentCategoryList" :key="cat.id" :label="cat.name" :value="cat.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click="handleCreateCategory">创建</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
import blogApi from '../api/blog.js';

//定义props
const props = defineProps({
    // 控制对话框显示
    modelValue: {
        type: Boolean,
        default: false
    },
    // 按钮文本
    buttonText: {
        type: String,
        default: '创建分类'
    },
    // 父级分类list
    parentCategoryList: {
        type: Array,
        default: () => []
    }
});

const parentCategoryList = ref([]);

// 定义事件
const emit = defineEmits(['update:modelValue', 'created', 'error'])

const showDialog = ref(props.modelValue);
//监听
watch(() => props.modelValue, (newVal) => {
    showDialog.value = newVal;
})

watch(() => props.parentCategoryList, (newVal) => {
    parentCategoryList.value = newVal;
})

watch(showDialog, (newVal) => {
    emit('update:modelValue', newVal)
})

const categoryRef = ref(null);
const categoryForm = ref({
    name: '',
    slug: '', //这个字段最后的时候把name自动转成英文slug
    index: 0,
    parent_category_id: null
});

// 验证规则
const categoryRules = ref({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 2, max: 20, message: '分类名称长度应在2-20个字符之间', trigger: 'blur' }
  ],
  slug: [
    { required: true, message: '请输入分类英文', trigger: 'blur' },
    { min: 2, max: 20, message: '分类英文长度应在2-20个字符之间', trigger: 'blur' }
  ],
  index: [
    { required: true, type:"number", message: '请输入排序级别', trigger: 'blur' },
    { type:"number",min: 0, max: 100, message: '排序级别应在0-100之间', trigger: 'blur' }
  ],
  parent_category_id: [
    { required: false, message: '请选择父级分类', trigger: 'blur' }
  ]
})

const handleCreateCategory = async () => {
    console.log(categoryForm.value);
    const res = await blogApi.CreateCategory(categoryForm.value);
    if (res.code === 0) {
        emit('created', res.data);
        categoryForm.value.name = '';
        categoryForm.value.slug = '';
        categoryForm.value.index = 0;
        categoryForm.value.parent_category_id = null;
        showDialog.value = false;
        categoryRef.value.resetFields();
    }
    else {
        emit('error', res.msg);
    }
}

</script>

<style scoped>
.create-category .el-dialog {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.create-category .el-dialog__title {
  color: var(--text-primary);
}

.create-category .el-form-item__label {
  color: var(--text-primary);
}

.create-category .el-input__inner {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  transition: all 0.3s ease;
}

.create-category .el-input__inner:focus {
  border-color: var(--highlight);
}

.create-category .el-button--primary {
  background-color: var(--highlight);
  border-color: var(--highlight);
  transition: all 0.3s ease;
}

.create-category .el-form-item {
  margin-bottom: 20px; /* 增加表单项之间的垂直间距 */
}

.create-category .el-button--primary:hover {
  opacity: 0.9;

}</style>